
body {
  margin: 0;
  padding: 0;
  background-color: #eee;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga","kern";-webkit-appearance: none;
}
a, input, textarea, select, button {
  outline: 0;
  -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga","kern";-webkit-appearance: none;
  color: @color-primary;
  text-decoration: none;
  &:active,&:hover{
    opacity: 0.9;
  }
}
.animated {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.slideOutRightA();
.slideInRightA();

.text-bold{
  font-weight: bold !important;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: right;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
.clearfix {
  .clearfix();
}
/*定位*/
.po-re{
  position: relative;
}
.po-ab{
  position: absolute;
}
.po-fx{
  position: fixed;
}
/*颜色用法*/
.color-primary{
  color:@color-primary !important;
}
.color-danger{
  color:@color-danger !important;
}
.color-warning{
  color:@color-warning !important;
}
.color-success{
  color:@color-success !important;
}
.color-disabled{
  color:#999 !important;
}
.color-gray{
  color:#666 !important;
}
.color-info{
  color: @color-info !important;
}
/*公共浮动*/
.fl{
  float: left !important;
}
.fr{
  float: right !important;
}
/*文字对齐方式*/
.align-left{
  text-align: left !important;
}
.align-right{
  text-align: right !important;
}
.align-center{
  text-align: center !important;
}
.underline{
  text-decoration: underline;
}

input::-webkit-search-cancel-button{
  display: none;
}
input[type=search]::-ms-clear{
  display: none;
}
/* 文本属性：字号、颜色、粗细、正斜 */
/* 字号 */
.f9 { font-size: 9px !important; }
.f10 { font-size: 10px !important; }
.f11 { font-size: 11px !important; }
.f12 { font-size: 12px !important; }
.f13 { font-size: 13px !important; }
.f14 { font-size: 14px !important; }
.f15 { font-size: 15px !important; }
.f16 { font-size: 16px !important; }
.f18 { font-size: 17px !important; }
.f20 { font-size: 20px !important; }
.f24 { font-size: 24px !important; }
.f26 { font-size: 26px !important; }
/* 外边距样式，作用于元素的上下外边距，上下各具有 n, m, w 三个级别 */
.m0 { margin: 0 !important; }
.m5 { margin: 5px !important; }
.m10 { margin: 10px !important; }
.m15 { margin: 15px !important; }
.m20 { margin: 20px !important; }
.m25 { margin: 25px !important; }
.m30 { margin: 30px !important; }
.m40 { margin: 40px !important; }

.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px   !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }

.mb0 { margin-bottom: 0px !important; }
.mb5 { margin-bottom: 5px  !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }

.mr0 { margin-right: 0px !important; }
.mr5 { margin-right: 5px  !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }

.ml0 { margin-left: 0px  !important; }
.ml5 { margin-left: 5px  !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }

.mtb0 { margin-top: 0 !important; margin-bottom: 0 !important;}
.mtb5 { margin-top: 5px  !important; margin-bottom: 5px !important; }
.mtb10 { margin-top: 10px !important; margin-bottom: 10px !important;}
.mtb15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.mtb20 { margin-top: 20px !important; margin-bottom: 20px !important;}
.mtb25 { margin-top: 25px !important; margin-bottom: 25px !important; }
.mtb30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.mtb40 { margin-top: 40px !important; margin-bottom: 40px !important; }

.mlr0 { margin-left: 0 !important; margin-bottom: 0 !important;}
.mlr5 { margin-left: 5px !important; margin-bottom: 5px !important; }
.mlr10 { margin-left: 10px !important; margin-bottom: 10px  !important;}
.mlr15 { margin-left: 15px !important; margin-bottom: 15px  !important; }
.mlr20 { margin-left: 20px !important; margin-bottom: 20px  !important;}
.mlr25 { margin-left: 25px !important; margin-bottom: 25px  !important; }
.mlr30 { margin-left: 30px !important; margin-bottom: 30px  !important; }
.mlr40 { margin-left: 40px !important; margin-bottom: 40px  !important; }


/* 内边距样式，作用于元素的上下内边距，上下各具有 n, m, w 三个级别 */
.p0 { padding: 0px !important; }
.p5 { padding: 5px   !important; }
.p10 { padding: 10px !important; }
.p15 { padding: 15px !important; }
.p20 { padding: 20px !important; }
.p25 { padding: 25px !important; }
.p30 { padding: 30px !important; }
.p40 { padding: 40px !important; }

.pt0 { padding-top: 0px !important; }
.pt5 { padding-top: 5px   !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }

.pl0 { padding-left: 0px !important; }
.pl5 { padding-left: 5px   !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }

.pr0 { padding-right: 0px !important; }
.pr5 { padding-right: 5px   !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }

.pb0 { padding-bottom: 0px !important; }
.pb5 { padding-bottom: 5px   !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }


.ptb0 { padding-top: 0 !important; margin-bottom: 0 !important;}
.ptb5 { padding-top: 5px   !important; margin-bottom: 5px   !important; }
.ptb10 { padding-top: 10px !important; margin-bottom:  10px !important;}
.ptb15 { padding-top: 15px !important; margin-bottom:  15px !important; }
.ptb20 { padding-top: 20px !important; margin-bottom:  20px !important;}
.ptb25 { padding-top: 25px !important; margin-bottom:  25px !important; }
.ptb30 { padding-top: 30px !important; margin-bottom:  30px !important; }
.ptb40 { padding-top: 40px !important; margin-bottom:  40px !important; }


.plr0 { padding-top: 0 !important; margin-bottom: 0 !important;}
.plr5 { padding-top: 5px   !important; margin-bottom: 5px !important; }
.plr10 { padding-top: 10px !important; margin-bottom: 10px !important;}
.plr15 { padding-top: 15px !important; margin-bottom: 15px !important; }
.plr20 { padding-top: 20px !important; margin-bottom: 20px !important;}
.plr25 { padding-top: 25px !important; margin-bottom: 25px !important; }
.plr30 { padding-top: 30px !important; margin-bottom: 30px !important; }
.plr40 { padding-top: 40px !important; margin-bottom: 40px !important; }

.text-ellipsis{
  .cell{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

.primary-link{
  color: @color-primary;
  cursor: pointer;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
}

.main-body-mapbox{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s;
  &.ready{
    opacity: 1;
  }
}
.map-mini-marker {
  width: 3px;
  height: 3px;
  background-color: #fff;
}

.main-info-list{
  margin: 0;
  padding: 0;
  list-style: none;
  .main-info-item{
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.7;
    padding: 0.5rem;
    &:nth-child(2n){
      background-color: rgba(255, 255, 255, 0.05);
    }
    &-label{
      width: 8em;
      opacity: 0.6;
    }
    &-value{
      flex: 1;
    }
  }
}

.filter-box-common{
  font-size: 0.6rem;
  color: #fff;
  position: relative;
  height: 2.2rem;
  display: flex;
  align-items: center;
  z-index: 10;
  &-header{
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
    &:hover{
      opacity: 0.6;
    }
  }
  &-body{
    position: absolute;
    top: 100%;
    left: 0;
    width: 380px;
    background-color: #110D7A;
    border-radius: 0.25rem;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    border:solid 1px @color-primary;
    &::after{
      display: block;
      content: '';
      border: solid 8px transparent;
      border-bottom-color: @color-primary;
      position: absolute;
      top: -16px;
      left: 2em;
    }
  }
  &-closer{
    width: 2.2rem;
    height: 2.2rem;
    position: absolute;
    left: 50%;
    right: 50%;
    top: 100%;
    background-color: #110D7A;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    margin-left: -1.1rem;
    &:hover{
      opacity: 0.8;
    }
    i{
      font-size: 0.7rem;
    }
  }
}

.map-icon-marker {
  width: 100px;
  height: 24px;
  background-color: #e68119;
  border-radius: 2px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  position: relative;
  &:hover{
    .map-icon-marker__icon{
      background-color: #FFE639;
      color: #AE6011;
    }
  }
  &.danger {
    background-color: #fe2c8e;
    .map-icon-marker__icon {
      background-color: #ff4a9e;
    }
    &:hover{
      .map-icon-marker__icon{
        background-color: #FF91C4;
        color: #94104D;
      }
    }
    &::after,
    &::before {
      background-color: #ff4a9e;
    }
  }
  &::after {
    content: "";
    display: block;
    height: 50px;
    width: 1px;
    background-color: #ffa141;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1;
  }
  &::before {
    content: "";
    display: block;
    height: 5px;
    width: 5px;
    background-color: #ffa141;
    position: absolute;
    bottom: -50px;
    left: -2px;
    z-index: 1;
    border-radius: 5px;
  }
  &__icon {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    background-color: #ffa141;
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transform: rotate(45deg);
    margin-left: -12px;
    z-index: 3;
    transition: all 0.3s;
    i {
      transform: rotate(-45deg);
    }
  }
  &__label {
    flex: 1;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }
}
.map-test-marker{
  width: 3px;
  height: 3px;
  background-color: #fff;
}
.map-icon-marker-mini{
  width: auto;
  height: 20px;
  border-radius: 2px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  position: relative;
  &:hover{
    .map-icon-marker-mini__icon{
      background-color: #FFE639;
    }
  }
  &.danger {
    background-color: #fe2c8e;
    .map-icon-marker__icon {
      background-color: #ff4a9e;
    }
    &::after,
    &::before {
      background-color: #ff4a9e;
    }
  }
  .marker-index{
    transform: rotate(-45deg);
    font-weight: bold;
    color: @color-primary;
  }
  &::after {
    content: "";
    display: block;
    height: 50px;
    width: 1px;
    background-color: #ffa141;
    position: absolute;
    top: 100%;
    left: -2px;
    z-index: 1;
  }
  &::before {
    content: "";
    display: block;
    height: 5px;
    width: 5px;
    background-color: #ffa141;
    position: absolute;
    bottom: -50px;
    left: -4px;
    z-index: 1;
    border-radius: 5px;
  }
  &__icon {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    background-color: #ffa141;
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transform: rotate(45deg);
    margin-left: -12px;
    z-index: 3;
    transition: all 0.3s;
    i {
      transform: rotate(-45deg);
    }
  }
  &__label {
    flex: 1;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.el-dragable-dialog{
  position: fixed !important;
  &.el-dialog{
    width: 360px;
    margin-left: -180px;
    left: 50%;
    margin-top: 0;
    top: 4rem;
    .el-dialog__body{
      max-height: calc(100vh - 5rem - 100px);
      overflow-y: auto;
      .nativeScroll()
    }
  }
  &.default-on-right{
    &.el-dialog{
      left: auto;
      right: 20px;
    }
  }
}
.el-dialog__wrapper{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

.panel-container{
  display: flex;
  padding-top: 0.5rem;
  &-col1{
    flex: 2;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 0;
    .zm-box4{
      flex: 1;
    }
  }
  &-col2,&-col3{
    flex:1;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 0;
    .zm-box4{
      flex: 1;
    }
  }
}

.drawer-body{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #110D7A;
  .zm-box4{
    flex: 1;
  }
}

.flex-column-box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.filter-header {
  height: 56px;
  display: flex;
  padding: 0 15px;
  align-items: center;
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}

.flex-center{
  justify-content: center;
  align-items: center;
}

.common-num-list{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  margin:0 0.75rem;
  justify-content: center;
  .common-num-unit{
    font-size: 0.7rem;
  }
  .common-num-item{
    list-style: none;
    width: 25%;
    padding:0.75rem 0.2rem;
    box-sizing: border-box;
    transition: all 0.3s;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    &.active{
      background-color: rgba(255, 255, 255, 0.1);
    }
    &:hover{
      background-color: rgba(255, 255, 255, 0.08);
    }
    &-label{
      font-size: 0.6rem;
      opacity: 0.6;
      margin-bottom: 0.25rem;
    }
    &-num{
      font-size: 1.3rem;
      font-weight: bold;
    }
  }
}
